<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>02-体会v-for循环的就地复用策略</title>
		<style type="text/css">
			.list li {
				list-style: none;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div>{{msg}}</div>
			<cir></cir>
		</div>
		<script type="text/javascript" src="./js/vue.js"></script>
		<script type="text/javascript">
			// 子组件cir
			Vue.component('cir', {
				data: function() {
					return {
						fru: [{
								id: 1,
								name: '香蕉'
							},
							{
								id: 2,
								name: '西瓜'
							},
							{
								id: 3,
								name: '苹果'
							},
							{
								id: 4,
								name: '凤梨'
							},
							{
								id: 5,
								name: '樱桃'
							},
						]
					}
				},
				// 	template: `<ul class="list">
				// 	<li v-for="(item,index) in fru">
				// 		<input name="Checkbox" type="checkbox">
				// 		{{index}}---{{item.name}}
				// 		<a href="javascript:;" @click="del(index)">删除</a>
				// 	</li>
				// </ul>`,
				// v-for循环，循环标签需要声明key关键字，vue关键字有“就地复用”策略
				// 就地复用：vue不会通过操作dom来匹配元素的顺序，而是简单的复用这个元素，并确保在特定的索引下
				// 显示已经被渲染的每个元素
				template: `<ul class="list" @mouseover="showIdAndChangedBgc" @mouseout="showIdAndChangedBgc">
				<li v-for="(item,index) in fru" :key="item.id" :data-index="item.id">
					<input name="Checkbox" type="checkbox">
					{{item.id}}---{{item.name}}
					<a href="javascript:;" @click="delItem(index)">删除</a>
					
				</li>
			</ul>`,
				methods: {
					// del(index) {
					// 	// 从dom结构中删除
					// 	let ul = document.getElementsByClassName('list')[0];
					// 	console.log(ul); // 原型是HTMLCollection，伪数组
					// 	let son = ul.children;
					// 	console.log(son);
					// 	ul.removeChild(son[index]);

					// }
					// 用事件委托的方式处理showId()
					// mouseover 鼠标悬浮事件;不要用mouseenter,mouseenter不支持冒泡
					// mouseout 鼠标移开事件;不要使用mouseleave,mouseleave同样不支持冒泡,在事件委托中,就是通过冒泡来实现
					// 因此,使用mouseover/mouseout来替代mouseenter和mouseleave
					// mouseenter无法冒泡
					/**
					 * 
					 * @简化代码
					 * 问题一：showId和coverId移动背景色改变的代码大多数一样，
					 * 但是有个问题，诸如处理对象event,事件处理对象event只能成为该函数的唯一参数，才能拿到event.target这个对象
					 * 因此，不能将showId和coverId函数抽象成两个参数的函数
					 * 但是，打印event发现，event.type属性可以获取事件名称：如："mouseover"
					 * 
					 * 问题二：再次尝试简化代码，将两个方法合二为一；再使用if分支，区分colorAndDialog()方法的第三个参数值
					 * 经验证：使用event.type来区分当前event.target处于 鼠标在元素之上 和 鼠标已经离开元素是可行的，随即完成了代码的
					 * 简化；
					 * 
					 */
					showIdAndChangedBgc(event) {
						event = event || window.event;
						console.log(event);
						console.log(event.type);
						console.log(event.target); // event.target引起触发事件的那个对象
						console.log(event.currentTarget); // event.currentTarget事件执行时，停留的那个对象
						const ind = event.target.dataset.index;
						console.log(ind);
						// 过滤掉ul
						if (event.target.nodeName.toLowerCase() === 'li') {
							if (event.type === "mouseover") {
								this.colorAndDialog(event.target, ind, "red");
							} else if (event.type === "mouseout") {
								this.colorAndDialog(event.target, ind, "#fff");
							}
						}
					},
					// coverIdAndChangedBgc(event) {
					// 	event = event || window.event;
					// 	console.log(event.target); // event.target引起触发事件的那个对象
					// 	console.log(event.currentTarget); // event.currentTarget事件执行时，停留的那个对象
					// 	const ind = event.target.dataset.index;
					// 	console.log(ind);
					// 	// 过滤掉ul
					// 	if (event.target.nodeName.toLowerCase() === 'li') {
					// 		this.colorAndDialog(event.target, ind, "#fff");
					// 	}
					// },
					// showId(event) {
					// 	event = event || window.event;
					// 	console.log(event.target); // event.target引起触发事件的那个对象
					// 	console.log(event.currentTarget); // event.currentTarget事件执行时，停留的那个对象
					// 	console.log(event.target.dataset.index);
					// 	// 过滤掉ul
					// 	if (event.target.nodeName.toLowerCase() === 'li') {
					// 		this.colorAndDialog(event.target, event.target.dataset.index, "red");
					// 	}

					// },
					// coverId(event) {
					// 	event = event || window.event;
					// 	console.log(event.target); // event.target引起触发事件的那个对象
					// 	console.log(event.currentTarget); // event.currentTarget事件执行时，停留的那个对象
					// 	console.log(event.target.dataset.index);
					// 	// 过滤掉ul
					// 	if (event.target.nodeName.toLowerCase() === 'li') {
					// 		this.colorAndDialog(event.target, event.target.dataset.index, "#fff");
					// 	}
					// },
					// 背景色变红，并且弹出对话框
					// 代码简化1
					colorAndDialog(obj, id, color) {
						// alert("id为" + id);
						obj.style.backgroundColor = color;
					},
					// colorAndDialog(obj, id) {
					// 	// alert("id为" + id);
					// 	obj.style.backgroundColor = "red";
					// },
					// // 背景色恢复白色
					// colorAndDialogX(obj, id) {
					// 	// alert("id为" + id);
					// 	obj.style.backgroundColor = "#FFF";
					// },
					// 删除列表某一行
					delItem(index) {
						this.fru.splice(index, 1);
					},
					// 	del(event) {
					// 		// event的兼容代码
					// 		event = event || window.event;
					// 		console.log(event);
					// 		// event.target监控冒泡到ul上的事件
					// 		console.log(event.target); // a 
					// 		console.log(event.target.dataset.index);
					// 		let ul = document.getElementsByClassName('list')[0];
					// 		if (event.target.nodeName.toLowerCase() === 'a') {
					// 			console.log(event.target.dataset.index); // 某个item.id
					// 			console.log(typeof event.target.dataset.index);
					// 			Array.from(ul.children).some((item, ind) => {
					// 				// 兼容处理，IE6/7/8中lastChild属性获取的就是最后一个子元素，IE9以上，火狐则使用默认的
					// 				// lastElementChild
					// 				let cur = parseInt(item.lastElementChild.getAttribute('data-index') || item
					// 					.lastChild.getAttribute('data-index'));
					// 				if (cur === parseInt(event.target.dataset
					// 						.index)) {
					// 					// 总结：
					// 					// 删除满足条件的当前li。vue中不提倡操作dom。fru数组发生变化，页面也就重新
					// 					// 刷新了，这是“双向绑定”的妙处

					// 					// ul.removeChild(item);
					// 					// 从fru数组删除该条数据
					// 					this.fru.splice(ind, 1);
					// 					return true;
					// 				}

					// 			});
					// 		}
					// 	}
				}
			});
			// 父组件，渲染区域#app
			let vm = new Vue({
				el: '#app',
				data: {
					msg: "这是父组件"
				}
			})
		</script>
	</body>
</html>
